<template>
  <div class="root">
    <div class="screen">
      <input class="screen-text" :value="screenValue" />
    </div>
    <div class="actions">
      <div v-for="(row, i) in rows" class="btn-row" :key="i">
        <basic-btn v-for="(key, c) in row" :key="c" @click="handleClick(key)">
          <span>{{key}}</span>
        </basic-btn>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import BasicBtn from '@/components/BasicBtn.vue';

const DOT = '.';
const SYMBOL = '-+';
const BACKSPACE = 'B';
const CLEAR = 'C';

export default {
  name: 'calc',
  components: { BasicBtn },
  data() {
    return {
      screenValue: '',
      expression: '',
      flag: '',
      flagClicked: false,
      finished: false,
      bracket: { left: 0, right: 0 },
      rows: [
        ['1', '2', '3', '+', BACKSPACE],
        ['4', '5', '6', '-', CLEAR],
        ['7', '8', '9', '*', '()'],
        [SYMBOL, '0', DOT, '/', '='],
      ],
    };
  },
  methods: {
    resetBrackets() {
      this.bracket = { left: 0, right: 0 };
    },
    calc() {},
    storageCalc() {},

    tabNumber(value) {
      const i = _.parseInt(value);
      if (_.isInteger(i) || value === DOT || value === SYMBOL) {
        if (this.flagClicked) {
          this.flagClicked = false;
          this.expression += this.flag;
          this.screenValue = '';
          this.flag = '';
        }
        if (_.isInteger(i)) {
          this.screenValue += value;
        }
        if (value === DOT && this.screenValue.indexOf(value) < 0) {
          if (this.screenValue === '') {
            this.screenValue = '0';
          }
          this.screenValue += value;
        }
        if (value === SYMBOL) {
          if (this.screenValue.startsWith('-')) {
            this.screenValue = this.screenValue.slice(1);
          } else {
            this.screenValue = `-${this.screenValue}`;
          }
        }
      }
    },
    tabFlag(value) {
      if (['+', '-', '*', '/'].indexOf(value) >= 0) {
        // storage the expression and set flag. calc not finished
        this.expression += this.screenValue;
        this.flagClicked = true;
        this.flag = value;
      }
    },
    tabBackspace(value) {
      if (value === BACKSPACE) {
        const len = this.screenValue.length;
        if (len > 0) {
          this.screenValue = this.screenValue.slice(0, len - 1);
        }
      }
    },
    tabClear(value) {
      if (value === CLEAR) {
        this.screenValue = '';
        this.expression = '';
      }
    },
    handleClick(value) {
      this.tabNumber(value);
      this.tabFlag(value);
      this.tabBackspace(value);
      this.tabClear(value);
      
      switch (value) {
        case '=':
          this.calc();
          break;
        case 'C':
          this.screenValue = '';
          this.expression = '';
          break;
        default:
      }
    }
  },
};
</script>


<style lang="less" scoped>
.root {
  display: flex;
  width: 480px;
  flex-direction: column;
  align-items: stretch;
  .screen input {
    font-size: 19px;
    padding: 10px;
    text-align: right;
  }
}
</style>
